<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角</title>
    <style>
        .container{
            display: flex;
            justify-content: left;
            align-items: center;
            height:200px;
        }
        .box1{
            width:200px;
            height:200px;
            background-color: red;
            margin: 0 20px;
            text-align: center;
            line-height: 200px;
            border-radius: 50%;
        }
        .box2{
            width:200px;
            height:200px;
            background-color: red;
            margin: 0 20px;
            text-align:center;
            line-height: 200px;
            border-radius:150px 20px;
        }
        .box3{
            width:200px;
            height:200px;
            background-color: red;
            margin: 0 20px;
            text-align:center;
            line-height:200px;
            border-radius: 50px 30px 10px;
        }
        .box4{
            width:200px;
            height:200px;
            background-color: red;
            margin: 0 20px;
            text-align: center;
            line-height:200px;
            border-radius:60px 40px 20px 0px;
        }
    </style>
</head>
<body>
    <div>
        <p>圆角：使用 CSS3的 border-radius 属性，可以给任何元素制作 '圆角'。圆角单位是 px，圆形是 100%，大于 50%就是一个圆的效果。</p>
        <p>border-radius 属性，可以使用以下规则：</p>
        <p style="color:rgb(26, 187, 187)">一个值：四个圆角值相同。</p>
        <p style="color:rgb(65, 83, 215)">两个个值：第一个值为左上角和右下角，第二个值为右上角和左下角。</p>
        <p style="color:rgb(39, 183, 183)">三个值：第一个值为左上角，第二个值为右上角和左下角，第三个之为右下角。</p>
        <p style="color:rgb(55, 65, 206)">四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。</p>
    </div>
    <div class="container">
        <div class="box1">盒子1</div>
        <div class="box2">盒子2</div>
        <div class="box3">盒子3</div>
        <div class="box4">盒子4</div>
    </div>
</body>
</html>